<template>
  <div class="examinationWrap">
    <div class="titleBar">
      <b>录取评测</b>
      <i>看当前成绩离目标有多远</i>
    </div>
    <div class="tabBar flex-h">
      <span :class="['flex1', tabIndex === 1 ? 'active' : '']" @click="tabIndex = 1">老高考版</span>
      <span :class="['flex1', tabIndex === 2 ? 'active' : '']" @click="tabIndex = 2">新高考版</span>
    </div>
    <div class="top2 scrollerOneDiv">
      <div class="chooseArea">
        <div class="selectList">
          <div class="flex-h absBox" v-show="tabIndex === 1">
            <b class="bb1">选科</b>
            <ul class="radio">
              <li @click="chooseRadio('1')">
                <img class="imgIcon" src="~/static/images/icon_radio_s.png" v-if="choRadio" />
                <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else />
                <span class="text">理科</span>
              </li>
              <li @click="chooseRadio('2')">
                <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-if="choRadio" />
                <img class="imgIcon" src="~/static/images/icon_radio_s.png" v-else />
                <span class="text">文科</span>
              </li>
            </ul>
          </div>
          <div class="flex-h absBox" v-show="tabIndex === 2">
            <b class="bb1">选科</b>
            <div class="flex1 xsp" @click="showSubjectPopup = true">
              <span class="sspx">{{ resultSubjectStr || '请选择' }}</span>
              <i class="poImg"></i>
            </div>
          </div>
          <div class="flex-h absBox" v-show="tabIndex === 1">
            <b class="bb1">考生省份</b>
            <div class="flex1 xsp" @click="poves = true">
              <span>{{ value1[0] }}</span>
              <i class="poImg"></i>
            </div>
          </div>
          <div class="flex-h absBox" v-show="tabIndex === 2">
            <b class="bb1">考生省份</b>
            <div class="flex1 xsp" @click="zjpoves = true">
              <span>{{ valuezj1[0] }}</span>
              <i class="poImg"></i>
            </div>
          </div>
          <div class="flex-h absBox">
            <b class="bb1">考生性别</b>
            <div class="flex1 xsp" @click="sexes = true">
              <span class="sspx">{{ value2[0] }}</span>
              <i class="poImg"></i>
            </div>
          </div>
          <div class="flex-h absBox" v-show="tabIndex === 1">
            <b class="bb1">目标批次</b>
            <div class="flex1 xsp" @click="picies = true">
              <span class="sspx">{{ value3[0] }}</span>
              <i class="poImg"></i>
            </div>
          </div>
          <div class="flex-h absBox">
            <b class="bb1">地域倾向</b>
            <div class="flex1 xsp" @click="showPopup = true">
              <span class="sspx">{{ valueArea || '请选择' }}</span>
              <i class="poImg"></i>
            </div>
          </div>
          <div v-show="tabIndex === 1">
            <WantMajor @resetScroller="resets" leftTitle="意向专业" :showArr="zhuanye" plhdText="输入关键词检索专业" @removeArrItem="intentionList" :division="disv" radioTxt="可多选"></WantMajor>
            <GetMoreChoose leftTitle="目标大学" :showArr="daxue" plhdText="输入关键词检索大学" @removeArrItem="finalList" modelType="2" radioTxt="单选"></GetMoreChoose>
          </div>
          <div class="flex-h absBox" v-show="isRank == true">
            <b class="bb1">考生分数</b>
            <input class="xsp flex1" v-on:blur="blurAdjust" placeholder="请输入考生分数" v-model="studentScore" type="number" oninput="if(value.length>2)value=value.slice(0,3)" />
          </div>
          <div class="flex-h absBox" v-show="tabIndex === 2">
            <b class="bb1">考生位次</b>
            <input class="xsp flex1" v-on:blur="blurAdjust" placeholder="请输入考生位次" v-model="zjstudentOrder" type="number" oninput="if(value.length>6)value=value.slice(0,6)" />
          </div>
          <div class="flex-h jiangsu" v-show="isJiang">
            <b class="bb1">选测等级</b>
            <span class="flex1 selectbox">
              <div class="top1">
                <b class="imgbox" @click="subsClick">
                  <i>{{ subject }}</i>
                  <span class="sImg"></span>
                </b>
                <b class="imgbox" @click="otherClick">
                  <i>{{ others }}</i>
                  <span class="sImg"></span>
                </b>
              </div>
              <div class="top1 top2">
                <b class="imgbox">
                  <i>{{ disv === '理科' ? '物理' : '历史' }}</i>
                </b>
                <b class="imgbox">
                  <i>其他</i>
                </b>
              </div>
            </span>
          </div>
        </div>
      </div>
      <div class="tip-box" v-show="tabIndex === 1">
        <span>根据你的分数匹配的位次为</span>
        <b>{{ studentOrder }}</b>
      </div>
      <div class="footerBtn flex-h">
        <span class="flex1 left" @click="goRecord">查看历史方案</span>
        <span class="flex1 right" @click="createPlan">生成方案</span>
      </div>
    </div>
    <!-- <div style="height: 3rem;"></div> -->
    <popup-picker @on-change="changesSubject" :data="subjectList" v-model="valueSubject" show-name :show.sync="czSubject" :columns="1"></popup-picker>
    <popup-picker @on-change="changes2" :data="sexList" v-model="value2" show-name :show.sync="sexes" :columns="1"></popup-picker>
    <popup-picker :show.sync="picies" @on-change="changes3" :data="batchList" :columns="1" v-model="value3" show-name></popup-picker>
    <popup-picker :show.sync="poves" @on-change="changes" @on-hide="onHide" :data="cityList" :columns="1" v-model="value1" show-name></popup-picker>
    <popup-picker :show.sync="zjpoves" @on-hide="zjconfimes" :data="zjcityList" :columns="1" v-model="zjprovinceValue" show-name></popup-picker>

    <actionsheet v-model="show7" :menus="menu" theme="android" @on-click-menu="ssclick" @on-after-hide="show7 = false"></actionsheet>
    <div v-transfer-dom>
      <popup v-model="showPopup" height="auto">
        <div style="width: 100%; background-color: #fff; height: 10rem; margin: 0 auto; border-radius: 5px;">
          <div style="padding: 20px 15px;" class="areaBox">
            <div class="cancelBar flex-h">
              <span class="flex1">地域倾向</span>
              <img @click="showPopup = false" src="~@/static/images/com_icon_back_close_44.png" alt="" />
            </div>
            <checker v-model="choosePlaceList" type="checkbox" class="checkerBox" default-item-class="defaultItem" selected-item-class="selectedItem">
              <checker-item @on-item-click="dianlno('place')" value>不限</checker-item>
              <checker-item @on-item-click="dianlye('place')" v-for="(item, index) in checkList" :key="index" :value="item">{{ item }}</checker-item>
            </checker>
            <button class="surebtn" @click="sumbitArea">确定</button>
          </div>
        </div>
      </popup>
    </div>
    <div v-transfer-dom>
      <popup v-model="showSubjectPopup" height="10rem">
        <div style="width: 100%; background-color: #fff; height: 10rem; margin: 0 auto; border-radius: 5px;">
          <div style="padding: 20px 15px;" class="areaBox">
            <div class="cancelBar flex-h">
              <span class="flex1">选科</span>
              <img @click="showSubjectPopup = false" src="~@/static/images/com_icon_back_close_44.png" alt="" />
            </div>
            <div class="checkerBox">
              <span @click="chooseSub(its, index)" :class="['chooseBox', subArr.indexOf(its) === -1 ? '' : 'selectActive']" v-for="(its, index) in subData" :key="index">
                {{ its }}
              </span>
              <span style="opacity: 0;" class="chooseBox"></span>
            </div>
          </div>
        </div>
      </popup>
    </div>
    <div v-transfer-dom>
      <loading :show="showLoading" :text="loadingText"></loading>
    </div>
    <call-taost :show="showCall" :phone="18971638225" @cancel="showCall = false">
      <a slot="body" class="call">考生信息或者偏好填写有误，请致电 18971638225 或微信添加 sxzxxq 咨询相关工作人员</a>
    </call-taost>
  </div>
</template>
<script>
import { PopupPicker, Confirm, Toast, Actionsheet, TransferDom, Popup, Checker, CheckerItem, Loading } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import WantMajor from '~/components/WantMajor'
import headerBack from '~/components/headerBack'
import { infoTopicComment } from '~/api/identity'
import { XTextarea } from 'vux'
import ls from 'store2'
import GetMoreChoose from '~/components/GetMoreChoose1'
import callTaost from '~/components/callTaost'
import { verification, saveExaminee, getLevel, getProvince, getPrecedence, savePreference, getCascadeArea, generateSolutions, saveExamineeZj, savePreferenceZj, generateSolutionsZj } from '~/api/volunteer'
export default {
  directives: {
    TransferDom,
  },
  components: { XTextarea, headerBack, PopupPicker, Confirm, Toast, headerBack, Actionsheet, scrollerEdit, WantMajor, verification, GetMoreChoose, Popup, Checker, CheckerItem, Loading, callTaost },
  data() {
    return {
      zjstudentOrder: '',
      zjpoves: false,
      zjprovinceValue: ['浙江'],
      resultSubjectStr: '',
      subArr: [],
      subData: ['物理', '化学', '生物', '技术', '历史', '政治', '地理'],
      showSubjectPopup: false,
      showCall: false,
      showLoading: false,
      loadingText: '加载中...',
      valueArea: '',
      tabIndex: 1,
      choRadio: true,
      choosePlaceList: [''],
      checkList: [],
      showPopup: false,
      showPicker: false,
      daxue: [],
      zhuanye: [],
      czSubject: false,
      textTxt: '',
      sendCount: 0,
      isRank: true,
      menu: {},
      sub: {
        '6sub': 'A+',
        '5sub': 'A',
        '4sub': 'B+',
        '3sub': 'B',
        '2sub': 'C',
        '1sub': 'D',
      },
      other: {
        '6sub': 'A+',
        '5sub': 'A',
        '4sub': 'B+',
        '3sub': 'B',
        '2sub': 'C',
        '1sub': 'D',
      },
      others: 'A+',
      otherScore: 6,
      show7: false,
      subject: 'A+',
      subjectScore: 6,
      isJiang: false,
      sexes: false,
      picies: false,
      poves: false,
      xdalag: false,
      copus: '',
      cityList: ['云南', '四川', '安徽', '山东', '山西', '广东', '广西', '江苏', '江西', '河北', '河南', '湖北', '湖南', '甘肃', '福建', '贵州', '辽宁', '重庆', '陕西'],
      zjcityList: ['浙江', '山东(等待开通)', '天津(等待开通)', '海南(等待开通)', '辽宁(等待开通)', '河北(等待开通)', '重庆(等待开通)', '江苏(等待开通)', '湖南(等待开通)', '湖北(等待开通)', '福建(等待开通)', '广东(等待开通)'],
      value1: ['请选择'],
      valuezj1: ['浙江'],
      sexList: ['男', '女'],
      subjectList: ['理科', '文科'],
      value2: ['请选择'],
      valueSubject: ['请选择'],
      batchList: [],
      value3: ['请选择'],
      studentScore: '',
      studentOrder: '--',
      btnDisabled: false,
      show: false,
      disv: '理科',
      userType: null,
      conponData: [],
      spIndex: 0,
      volumes: '',
      ssr: true,
    }
  },
  watch: {
    studentScore(score) {
      var reg = /^\d{1,}$/
      var pattern = new RegExp(reg)
      if (pattern.test(score) && score > 100 && score < 1000 && this.value1[0] != '请选择') {
        if (this.tabIndex === 1) {
          this.getPrecedence()
        }
      }
    },
  },
  mounted() {
    this.getCascadeArea()
    this.$store.commit('changeSchoolDivisionl', this.disv)
  },
  methods: {
    resets() {
      this.$emit('resetScroller')
    },
    blurAdjust() {
      this.$emit('myblurs')
    },
    getStudentInfoZj() {
      generateSolutionsZj(ls.get('userType'))
        .then((res) => {
          if (res.code === '0') {
            ls.set('caseData1', res.data.balance)
            ls.set('caseData2', res.data.academy)
            ls.set('caseData3', res.data.major)
            this.loadingText = '100%'
            setTimeout(() => {
              this.commonJs.gopush('../zhejiang/programme')
            }, 500)
            return false
          }
          if ((res.code = '1200004')) {
            this.showCall = true
            this.showLoading = false
            return false
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    zjconfimes(e) {
      if (e) {
        if (this.zjprovinceValue[0] === '浙江') {
          this.valuezj1 = this.zjprovinceValue
          this.zjpoves = false
        } else {
          this.zjpoves = true
        }
      } else {
        this.zjpoves = false
      }
    },
    chooseSub(itsm, index) {
      if (this.subArr.indexOf(itsm) == -1) {
        if (this.subArr.length === 3) {
          this.$vux.toast.text('最多只能选择三个科目')
          return false
        }
        this.subArr.push(itsm)
        this.subIndex = index
      } else {
        this.subArr = this.subArr.filter(function(element, index) {
          return element != itsm
        })
      }
      let str = ''
      for (var i in this.subArr) {
        str += this.subArr[i] + '+'
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1)
      }
      this.resultSubjectStr = str
      if (this.subArr.length === 3) {
        this.showSubjectPopup = false
      }
    },
    show1change(val) {
      this.showLoading = true
      tick(0, (percent) => {
        if (percent === 100 || this.loadingText == '100%') {
          this.showLoading = false
          return
        }
        this.loadingText = `${percent}%`
      })
    },
    getStudentInfo() {
      generateSolutions(ls.get('userType'))
        .then((res) => {
          if (res.code === '0') {
            ls.set('caseData1', res.data.balance)
            ls.set('caseData2', res.data.academy)
            ls.set('caseData3', res.data.major)
            this.loadingText = '100%'
            setTimeout(() => {
              this.commonJs.gopush('../volunteer/programme')
            }, 500)
            return false
          }
          if ((res.code = '1200004')) {
            this.showCall = true
            this.showLoading = false
            return false
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    getTextByJs(arr) {
      var str = ''
      for (var i = 0; i < arr.length; i++) {
        str += arr[i] + '+'
      }
      //去掉最后一个逗号(如果不需要去掉，就不用写)
      if (str.length > 0) {
        str = str.substr(0, str.length - 1)
      }
      return str
    },
    async createPlan() {
      let aryZye = []
      this.zhuanye.forEach((item) => {
        aryZye.push(item.major_code.substring(item.major_code.indexOf('&') + 1))
      })
      let aryDx = []
      this.daxue.forEach((item) => {
        if (item.indexOf('*') > 0) {
          aryDx.push(item.substring(item.indexOf('&') + 1, item.indexOf('*')))
        } else {
          aryDx.push(item.substring(item.indexOf('&') + 1))
        }
      })
      if (this.tabIndex === 1) {
        if (this.value1[0] === '请选择') {
          this.$vux.toast.text('请选择您高考所在省份')
          return
        }
        if (this.value2[0] === '请选择') {
          this.$vux.toast.text('请选择您的性别')
          return
        }
        if (this.value3[0] === '请选择') {
          this.$vux.toast.text('请选择您的目标批次')
          return
        }
        if (!this.studentScore * 1) {
          this.$vux.toast.text('请输入您的高考分数')
          return
        }
        let obj
        if (this.isJiang == true) {
          obj = {
            division: this.disv,
            level: this.value3[0],
            precedence: this.studentOrder * 1,
            province: this.value1[0],
            score: this.studentScore * 1,
            sex: this.value2[0],
            userType: ls.get('yxkData').userType,
            subjects: this.subjectScore,
            other: this.otherScore,
          }
        } else {
          obj = {
            division: this.disv,
            level: this.value3[0],
            precedence: this.studentOrder * 1,
            province: this.value1[0],
            score: this.studentScore * 1,
            sex: this.value2[0],
            userType: ls.get('yxkData').userType,
          }
        }
        let objPreference = {
          area: this.getTextByJs(this.choosePlaceList),
          excludeArea: '',
          excludeCollege: '',
          excludeMajor: '',
          generate: 0,
          intentionCollege: this.getTextByJs(aryDx),
          intentionMajor: this.getTextByJs(aryZye),
          nature: '',
          userType: ls.get('userType'),
        }
        let userInfo = await this.saveExaminee(obj)
        let preferenceInfo = await this.savePreference(objPreference)
        if (preferenceInfo.code == '0') {
          this.show1change()
          this.getStudentInfo()
        } else {
          this.$vux.toast.text('考生信息保存失败，请稍后再试')
        }
      } else {
        if (this.subArr.length != 3) {
          this.$vux.toast.text('您需要选择三门科目')
          return
        }
        if (this.value2.length === 0 || this.value2[0] === '请选择') {
          this.$vux.toast.text('请选择您的性别')
          return
        }
        if (this.studentScore === '') {
          this.$vux.toast.text('请输入您的考试分数')
          return
        }
        if (this.zjstudentOrder === '') {
          this.$vux.toast.text('请输入您的分数所对应的位次')
          return
        }
        let zjobj = {
          precedence: this.zjstudentOrder * 1,
          province: '浙江',
          score: this.studentScore * 1,
          sex: this.value2[0],
          userType: ls.get('userType'),
          subjects: this.resultSubjectStr,
        }
        let zjPreferencObj = {
          area: this.getTextByJs(this.choosePlaceList),
          intentionMajorFirst: '',
          intentionMajorSecond: '',
          intentionMajorThird: '',
          nature: '',
          userType: ls.get('userType'),
        }
        let zjUserInfo = await this.saveExamineeZj(zjobj)
        let zjPreference = await this.savePreferenceZj(zjPreferencObj)
        if (zjPreference.code == '0') {
          this.show1change()
          this.getStudentInfoZj()
        } else {
          this.$vux.toast.text('考生信息保存失败，请稍后再试')
        }
      }
    },
    goRecord() {
      if (this.tabIndex === 1) {
        this.commonJs.gopush('../volunteer/programrecord')
      } else {
        this.commonJs.gopush('../zhejiang/programrecord')
      }
    },
    sumbitArea() {
      if (this.choosePlaceList.length === 0) {
        this.$vux.toast.text('请选择您的地域倾向')
        return
      }
      this.showPopup = false
      //   console.log('this.choosePlaceList[0]: ', this.choosePlaceList)
      if (this.choosePlaceList[0] === '') {
        this.valueArea = '不限'
      }
      let str = this.choosePlaceList.join('+')
      str.length > 15 ? (this.valueArea = str.substring(0, 15) + '...') : (this.valueArea = str)
    },
    chooseRadio(type) {
      type === '1' ? (this.choRadio = true) : (this.choRadio = false)
      type === '1' ? (this.disv = '理科') : (this.disv = '文科')
      if (this.studentScore > 100 && this.studentScore < 1000 && this.value1[0] != '请选择') {
        this.getPrecedence()
      }
      this.$store.commit('changeSchoolDivisionl', this.disv)
      this.$emit('resetScroller')
    },
    getCascadeArea() {
      getCascadeArea()
        .then((res) => {
          0
          if (res.code === '0') {
            let areaData = res.data
            let arrArea = []
            areaData.forEach((item, index) => {
              arrArea.push(item.label)
            })
            this.checkList = arrArea
          }
        })
        .catch(() => {
          // this.$vux.toast.text('网络错误，请稍后再试！');
        })
    },
    dianlno(type) {
      if (type == 'place') {
        this.choosePlaceList = ['']
      } else {
        this.schoolTypeList = ['']
      }
    },
    dianlye(type) {
      if (type == 'place') {
        if (this.choosePlaceList[0] === '') {
          this.choosePlaceList.splice(0, 1)
        }
      } else {
        if (this.schoolTypeList[0] === '') {
          this.schoolTypeList.splice(0, 1)
        }
      }
    },
    finalList(data) {
      if (data.type == '2') {
        this.daxue = data.msgList
      } else if (data.type == '4') {
        this.outDaxue = data.msgList
      } else {
        this.outZhuanye = data.msgList
      }
    },
    intentionList(data) {
      this.zhuanye = data.msgList
    },
    getPrecedence() {
      let obj = {
        division: this.disv,
        province: this.value1[0],
        score: this.studentScore,
      }
      getPrecedence(obj)
        .then((res) => {
          if (res.code == '0') {
            this.studentOrder = res.data.precedence
          }
        })
        .finally(() => {})
    },
    subsClick() {
      this.show7 = true
      this.menu = this.sub
    },
    otherClick() {
      this.show7 = true
      this.menu = this.other
    },
    ssclick(key, value) {
      if (this.menu == this.sub) {
        this.subject = value
        this.subjectScore = parseInt(key)
      } else {
        this.others = value
        this.otherScore = parseInt(key)
      }
    },

    changes(e) {
      this.value1 = e
      if (e[0] === '江苏') {
        this.isJiang = true
      } else {
        this.isJiang = false
      }
      this.$store.commit('changeSchoolProvince', this.value1[0])
    },
    changes2(e) {
      this.value2 = e
    },
    changesSubject(e) {
      this.valueSubject = e
    },
    changes3(e) {
      this.value3 = e
      this.$store.commit('changeSchoolLevel', this.value3[0])
    },
    onHide(type) {
      if (type == true) {
        this.getPiCi(this.value1[0])
        this.value3[0] = '请选择'
      }
      if (this.studentScore > 100 && this.studentScore < 1000 && type == true) {
        this.getPrecedence()
      }
    },
    getPiCi(pro) {
      getLevel(pro)
        .then((res) => {
          if (res.code === '0') {
            let ary = []
            res.data.forEach((item) => {
              if (item.indexOf('专') == -1 && item.indexOf('三') == -1 && item.indexOf('四') == -1) {
                ary.push(item)
              }
            })
            this.batchList = ary
          }
        })
        .catch(() => {
          this.$vux.toast.text('网络错误，请稍后再试！')
        })
    },
    saveExamineeZj(obj) {
      return saveExamineeZj(obj)
    },
    saveExaminee(obj) {
      return saveExaminee(obj)
    },
    savePreference(obj) {
      return savePreference(obj)
    },
    savePreferenceZj(obj) {
      return savePreferenceZj(obj)
    },
  },
}
function tick(i, cb) {
  setTimeout(function() {
    i++
    cb(i)
    if (i < 100) {
      tick(i, cb)
    }
  }, 3000)
}
</script>

<style lang="less" scoped>
/deep/.weui-cell_access {
  display: none;
}
.examinationWrap {
  width: 6.9rem;
  height: auto;
  padding-bottom: 0.5rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
  border-radius: 0.2rem;
  margin: 0.3rem auto;
  //   bg_luqu
  .titleBar {
    height: 1.8rem;
    width: 100%;
    background: url('~/static/images/bg_luqu.png') no-repeat;
    background-size: 100% 100%;
    padding-left: 0.3rem;
    padding-top: 0.4rem;
    b,
    i {
      display: block;
    }
    b {
      font-size: 0.4rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
    }
    i {
      font-size: 0.28rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
  .tabBar {
    padding: 0.3rem;
    box-sizing: border-box;
    span {
      height: 0.8rem;
      background: rgba(247, 247, 250, 1);
      border-radius: 0.12rem;
      text-align: center;
      line-height: 0.8rem;
      font-size: 0.3rem;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
    }
    span:nth-of-type(1) {
      margin-right: 0.2rem;
    }
    .active {
      background: rgba(255, 245, 229, 1);
      color: rgba(255, 173, 13, 1);
    }
  }
}
.scrollerOneDiv {
  padding: 0 0.3rem;
  width: 100%;
  .warnText {
    width: 100%;
    height: auto;
    background: #fff7d4;
    margin-top: 0.2rem;
    padding: 0.1rem 0.3rem;
    box-sizing: border-box;
    span {
      font-size: 0.22rem;
      color: #222;
      line-height: 0.3rem;
    }
  }
  .chooseArea {
    margin-top: 0.21rem;
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 0.4rem;
    .gaizi {
      width: 100%;
      height: 100%;
      position: absolute;
      background: rgba(0, 0, 0, 0.2);
      z-index: 100;
    }

    .selectList {
      flex: 1;
      box-sizing: border-box;
      .absBox {
        width: 6.3rem;
        height: 0.9rem;
        line-height: 0.9rem;
        .bb1 {
          color: #222222;
          font-size: 0.3rem;
          font-weight: bold;
          letter-spacing: 0.02rem;
        }
        .xsp {
          text-align: right;
          height: 0.8rem;
          line-height: 0.8rem;
          font-size: 0.3rem;
          font-weight: bold;
          border: none;
          padding-right: 0.5rem;
          color: #222;
          box-sizing: border-box;
          outline: none;
          position: relative;
          span {
            font-size: 0.3rem;
            font-weight: bold;
            color: #222;
          }
          .poImg {
            position: absolute;
            right: 0;
            top: 0.2rem;
            width: 0.4rem;
            height: 0.4rem;
            background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
            background-size: 3rem 2.4rem;
          }
        }
      }
      .jiangsu {
        height: 1.2rem;
        width: 6.3rem;
        .bb1 {
          color: #222222;
          font-size: 0.3rem;
          font-weight: bold;
          letter-spacing: 0.02rem;
        }
        .selectbox {
          .top1 {
            width: 100%;
            height: 0.6rem;
            text-align: right;
            font-size: 0.3rem;
            font-weight: bold;
          }
          .imgbox {
            text-align: center;
            display: inline-block;
            width: 1.6rem;
            height: 0.6rem;
            border: 1px solid #eee;
            border-radius: 0.1rem;
            line-height: 0.6rem;
            margin-right: 0.2rem;
            .sImg {
              display: inline-block;
              width: 0.2rem;
              height: 0.2rem;
              background: url('~@/static/sprite/other_sprites.png') -0.5rem -3.8rem;
              background-size: 4.68rem 4.08rem;
            }
            i {
              font-size: 0.3rem;
              font-weight: bold;
            }
          }
          .top2 {
            .imgbox {
              border: none;
            }
          }
        }
      }
    }
  }
  .tipText {
    padding: 0.24rem;
    background: #fafafc;
    border-radius: 8px;
    .part_1,
    .part_2 {
      display: flex;
      justify-content: flex-start;
      .circleIcon {
        display: inline-block;
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 50%;
        background: #d8d8d8;
        margin-right: 0.16rem;
        margin-top: 0.1rem;
      }
      .text {
        width: 6.12rem;
        color: #999;
        font-size: 0.24rem;
        line-height: 0.33rem;
      }
    }
    .part_1 {
      margin-bottom: 0.4rem;
    }
  }
}
.tip-box {
  width: 100%;
  height: 1.4rem;
  background: rgba(250, 250, 252, 1);
  border-radius: 0.1rem;
  overflow: hidden;
  span,
  b {
    display: block;
    text-align: center;
  }
  span {
    font-size: 0.24rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 0.33rem;
    margin-top: 0.3rem;
  }
  b {
    font-size: 0.34rem;
    font-weight: 600;
    color: @mainColor;
    margin-top: 0.1rem;
  }
}
.areaBox {
  .cancelBar {
    margin-bottom: 0.2rem;
    span {
      font-size: 0.36rem;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
    }
    img {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
  .chooseBox {
    width: 3.3rem;
    height: 0.8rem;
    background: rgba(247, 247, 250, 1);
    border-radius: 0.4rem;
    font-size: 0.3rem;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    text-align: center;
    line-height: 0.8rem;
    margin-top: 0.3rem;
  }
  .selectActive {
    background: rgba(255, 245, 229, 1);
    color: rgba(255, 173, 13, 1);
  }
  .checkerBox {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .defaultItem {
    width: 1.48rem;
    height: 0.7rem;
    font-size: 0.26rem;
    line-height: 0.7rem;
    border-radius: 0.1rem;
    border: 2px solid transparent;
    font-weight: 500;
    background: #fafafa;
    text-align: center;
    letter-spacing: 0.05rem;
    margin-bottom: 0.12rem;
    box-sizing: border-box;
  }
  .selectedItem {
    border: 2px solid @mainColor;
    color: @mainColor;
    background: #fff;
  }
  .surebtn {
    width: 6.2rem;
    height: 0.88rem;
    background: rgba(255, 173, 13, 1);
    border-radius: 0.44rem;
    text-align: center;
    line-height: 0.88rem;
    font-size: 0.3rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    margin: 0.4rem auto 0;
    border: none;
    outline: none;
  }
}
.radio {
  flex: 1;
  text-align: right;
  list-style: none;
  li {
    display: inline-block;
    .text {
      margin-left: 0.2rem;
      font-size: 0.36rem;
      color: #222;
      font-weight: bold;
      vertical-align: middle;
    }
    .imgIcon {
      width: 0.4rem;
      height: 0.4rem;
      vertical-align: middle;
    }
  }
  li:nth-of-type(2) {
    margin-left: 0.2rem;
  }
}
/deep/.vux-cell-box:not(:first-child):before {
  border-top: none;
}
.footerBtn {
  margin-top: 0.5rem;
  span {
    height: 0.88rem;
    background: rgba(255, 214, 61, 1);
    border-radius: 0.5rem;
    text-align: center;
    line-height: 0.88rem;
    font-size: 0.3rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
  }
  .left {
    background: rgba(255, 214, 61, 1);
    margin-right: 0.2rem;
  }
  .right {
    background: rgba(255, 173, 13, 1);
  }
}
</style>
